<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
 <div id="app">
    <cpn :cnum1="num1" :cnum2="num2"
         @num1change="num1change"
         @num2change="num2change"
    ></cpn>
    <h2>父组件num1:{{num1}}</h2>
    <h2>父组件num2:{{num2}}</h2>
 </div>

 <template id="cpn">
   <div>
     <h2>props:{{cnum1}}</h2>
     <input type="text" v-model="dnum1" />
     <h2>props:{{cnum2}}</h2>
     <input type="text"  v-model="dnum2"  />
   </div>
 </template>

 <!--
  需求1 子组件的cnum1 ，cnum2 分别绑定父组件的num1，num2  这个简单

  需求2 子组件 定义2个 input  分别输入之后，需要改变子组件的cnum1，父组件的num1  如果采用v-model 这样做是有问题的，而且客户端也会报错
  Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.
  Instead, use a data or computed property based on the prop's value. Prop being mutated: "cnum1"

  可以看到vue提示 在子组件里面定义data函数或者计算属性

   在子组件中不要是去修改props 中属性的值  ，通过$emit  发射一个方法 传递给 父组件，让父组件的值修改就能达到修改子组件中的值，因为子组件的值，是父组件传递快来的

  需求3  第一个 text = 第二个text *100     当然对应关联值也要修改


  第二种方法实现  可以在子组件 input 绑定v-model 需要用watch 监听 对应属性，属性变化就能触发
  -->
     <script src="../js/vue.js"></script>
     <script>
       const cpn={
         template: '#cpn',
         props: {
           cnum1: {
             type: Number
           },
           cnum2:{
             type: Number
           }
         },
         data(){
           return {
             dnum1: this.cnum1,
             dnum2: this.cnum2,
           }
         },
         watch:{
           dnum1(newValue,oldValue){
             if(newValue!=oldValue) {
               console.log("cnum1_1,newVsalue:" + newValue + ",oldValue:" + oldValue);
               //手动改变 dnum2 的值   下面代码执行完，会触发watch 时间 dnum2（）
               this.dnum2 = newValue * 100
               console.log("cnum1_2,newVsalue:" + newValue + ",oldValue:" + oldValue);
               // dnum1 的值发生改变，发射一个事件给父组件就行
               this.$emit('num1change', newValue)
               console.log("cnum1_3,newVsalue:" + newValue + ",oldValue:" + oldValue);
             }
           },
           dnum2(newValue,oldValue){
             if(newValue!=oldValue) {  //为什么要加这个，因为手动改变值会产生多次调用，自己加个值改变的判断，避免重负执行逻辑
               console.log("cnum2_1,newVsalue:" + newValue + ",oldValue:" + oldValue);
               //手动改变 dnum1 的值   下面代码执行完，会触发watch 时间 dnum2（）
               this.dnum1 = newValue / 100
               console.log("cnum2_2,newVsalue:" + newValue + ",oldValue:" + oldValue);
               // dnum2 的值发生改变，发射一个事件给父组件就行
               this.$emit('num2change', newValue)
               console.log("cnum2_3,newVsalue:" + newValue + ",oldValue:" + oldValue);
             }
           }
         }
       }
       const app=new Vue({
         el: '#app',
         data: {
           message:'你好vue',
           num1: 1,
           num2: 0
         },
         methods:{
           num1change(value){
             this.num1=parseFloat(value)
           },
           num2change(value){
             this.num2=parseFloat(value)
           },
         },
         components:{
           cpn
         }
       })
     </script>
</body>
</html>